<!--
 * @Descripttion: 预约设置
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2022-01-28 15:13:22
-->
<template>
  <div class="lb-appointment-setting">
    <top-nav></top-nav>
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="setForm"
        :rules="setFormRules"
        ref="setForm"
        label-width="140px"
      >
        <!-- <el-form-item label="预约标题" prop="appoint_name">
              <el-input v-model="setForm.appoint_name" placeholder="请输入标题"></el-input>
            </el-form-item> -->
        <el-form-item label="预约背景图" prop="appoint_pic">
          <lb-cover
            :fileList="setForm.appoint_pic"
            @selectedFiles="getCover"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸：750*400</lb-tool-tips>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitFormInfo('setForm')">{{
            $t('action.submit')
          }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      setForm: {
        appoint_pic: []
      },
      setFormRules: {
        appoint_pic: { required: true, type: 'array', message: '请上传图片', trigger: 'change' }
      }
    }
  },
  created () {
    this.getDetail()
  },
  methods: {
    getCover (img) {
      this.setForm.appoint_pic = img
    },
    async getDetail () {
      let { code, data } = await this.$api.editAppointmentAppConfig()
      if (code !== 200) return
      data.appoint_pic = data.appoint_pic ? [{ url: data.appoint_pic }] : []
      for (let key in this.setForm) {
        this.setForm[key] = data[key]
      }
    },
    submitFormInfo (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let param = JSON.parse(JSON.stringify(this.setForm))
          param.appoint_pic = param.appoint_pic[0].url
          this.$api.editAppointmentAppConfig(param).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('tips.successSub'))
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-appointment-setting {
  width: 100%;
  .el-input {
    width: 300px;
  }
}
</style>
